/**
{
"style":{
"navigationBarTitleText":"验车记录",
"navigationStyle": "default"
}
}
*/

<template>
	<xi-list ref="$list" class="bg#f5f5f5" :query="on.query" :pageSize="15">

		<template #default="{ data }">
			<div class="list">
				<view class="item" v-for="item in data" :key="item.id" @click="jumpDetail(item)">

					<view class="top">
						<view class="flex-lr-tbc">
							<view class="top-le">
								订单编号 <text>{{item.order_sn}}</text>
							</view>
							<!-- text1 -->
							<view class="top-ri">
								已核销
							</view>
						</view>

						<view class="order-info display_flex mt26">
							<image class="flex-shrink" src="__ROOT__/common/images/del/1.png" mode="aspectFill"></image>

							<view class="flex_1 pl30">
								<view class="title text-ellipsis-2">
									{{item.sname}}-{{item.way == 0? '验车预约': '上门取车'}}
								</view>

								<view class="time">
									预约时间：{{item.day}}
								</view>

								<view class="price">
									￥ {{item.pay}}
								</view>
							</view>
						</view>
					</view>

					<view class="hx-time display_flex">
						核销时间：{{item.hx_time}}
					</view>


				</view>
			</div>
		</template>
	</xi-list>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue'
	import vCode from '@/components/vCode.vue';
	const isShowCode = ref(false)
	const codeImage = ref('')

	const pageType = ref('')


	let select = Vue.reactive({
		status: '',
	})
	const $list = ref(null)
	let on = {
		async query(req) {
			let res = await $post("/user/hx_order", {
				...req,
			})
			let obj = {
				data: res.list,
			}
			return obj
		},
	}


	const jumpDetail = (item) => {
		uni.navigateTo({
			url: '/pages/mine/mine/orderDetail?id=' + item.id
		})
	}

	Vue.onShow(() => {

	})

	Vue.onLoad(() => {

	})
</script>
<style scoped lang='scss'>
	.list {
		.item {
			margin-top: 20rpx;
			background-color: #fff;

			.top {
				padding: 32rpx 24rpx 22rpx;
			}

			.top-le {
				font-family: OPPOSans, OPPOSans;
				font-weight: 400;
				font-size: 28rpx;
				color: #7D7D7D;
				line-height: 32rpx;
				text-align: justified;

				text {
					color: #333333;
				}
			}

			.top-ri {
				font-family: OPPOSans, OPPOSans;
				font-weight: 400;
				font-size: 28rpx;
				color: #348B8A;

				&.text1 {
					color: #E50004;
				}
			}

			.order-info {
				image {
					width: 188rpx;
					height: 188rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

				.title {
					font-family: OPPOSans, OPPOSans;
					font-weight: 500;
					font-size: 30rpx;
					color: #292929;
					line-height: 44rpx;
					padding-top: 6rpx;
				}

				.time {
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 44rpx;
					padding-top: 8rpx;
				}

				.price {
					font-family: OPPOSans, OPPOSans;
					font-weight: 500;
					font-size: 32rpx;
					color: #E50004;
					line-height: 48rpx;
					margin-top: 8rpx;
				}
			}

			.btns {
				padding: 22rpx 24rpx;
				border-top: 2rpx solid #eee;

				.btn {
					width: 162rpx;
					height: 62rpx;
					border-radius: 68rpx 68rpx 68rpx 68rpx;
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 28rpx;
					text-align: center;
					line-height: 62rpx;
					margin-left: 14rpx;

					&.btn1 {
						background: #F7F7F7;
						color: #828282;
					}

					&.btn2 {
						background: #348B8A;
						color: #fff;
					}
				}
			}

		}
	}
	
	.hx-time {
		font-family: OPPOSans, OPPOSans;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		line-height: 44rpx;
		text-align: left;
		padding: 20rpx 24rpx;
		border-top: 1rpx solid #eee;
	}
</style>